addEventListener('load', function () {
  var div = document.querySelectorAll('.numb');
  var tip = document.querySelector('.tip');
  var a = document.querySelector('.a');
  console.dir(a)
  console.log(a)
  var b = document.querySelector('.b');
  console.dir(b)
  var c = document.querySelector('.c');
  var mid_ctn = document.querySelector('.ctn_middle');
  //计数函数
  function number(x, y) {
    for (var i = 0; i < x.children.length + 1; i++) {
      div[y].innerText = i;
    }
  }
  //离开焦点时，提示消失
  a.onblur = function () {
    tip.style.display = 'none';
  }
  //键盘按下事件函数
  document.addEventListener('keydown', function (e) {
    if (e.key == 'Enter') {
      //如果文本框里的值是空，则显示提示
      if (a.value == '') {
        tip.style.display = 'inline-block';
        return false;
      }
      else {
        //如果文本框里的值有，则提示消失
        tip.style.display = 'none';
        //创建一个li标签并且添加类
        var li = document.createElement('li');
        li.classList.add('lis');
        //li里创建一个input（即多选框）标签插入内容前面并且添加类
        var choose = document.createElement('input');
        choose.setAttribute('type', 'checkbox');
        choose.classList.add('chooses');
        li.appendChild(choose);
        //li里创建一个span标签插入内容前面并且添加类
        var al = document.createElement('span');
        al.innerText = a.value;
        li.appendChild(al);
        //li里创建a标签并添加垃圾桶图标
        var ar = document.createElement('a');
        ar.href = '#';
        ar.classList.add('iconfont');
        ar.classList.add('iconlajitong');
        li.appendChild(ar);
        //如果没有内容则li插在后面，如果有内容则li插在前面
        if (b.children.length == 0) { b.appendChild(li); }
        else { b.insertBefore(li, b.children[0]); }
        a.value = '';
        number(b, 0,);
      }
    }
  })
  //设置一个大的容器，用监听这个容器的点击事件，获取点击对象
  mid_ctn.addEventListener('click', function (e) {
    //如果是多选框
    if (e.target.nodeName.toLowerCase() === 'input' && e.target.className == 'chooses') {
      console.dir(e)
      var copy_a = e.target.parentNode.cloneNode(true);
      //判断是否已勾选，若未勾复制并转移到已做
      if (e.target.parentNode.parentNode.className === 'b' && e.target.checked) {
        copy_a.style.backgroundColor = ' rgb(210, 210, 210)';
        if (c.children.length == 0) { c.appendChild(copy_a); }
        else { c.insertBefore(copy_a, c.children[0]); }
        e.target.parentNode.parentNode.removeChild(e.target.parentNode);
        number(b, 0,);
        number(c, 1,);
      }
      //否则复制并转移到未做
      else {
        copy_a.style.backgroundColor = ' rgb(255,255,255)';
        b.appendChild(copy_a);
        e.target.parentNode.parentNode.removeChild(e.target.parentNode);
        number(c, 1);
        number(b, 0);
      }
    }
    //如果是a标签，则删除
    else if (e.target.nodeName.toLowerCase() === 'a') {
      e.target.parentNode.parentNode.removeChild(e.target.parentNode);
      number(c, 1);
      number(b, 0);
    }
    //如果是span
    else if (e.target.nodeName.toLowerCase() === 'span') {
      //创建一个输入框，将span换成输入框，这样就可以修改里面的内容
      var au = document.createElement('input');
      au.setAttribute('type', 'text');
      au.classList.add('auu');
      au.value = e.target.innerText;
      e.target.parentNode.insertBefore(au, e.target.parentNode.children[1]);
      au.focus();
      e.target.style.display = 'none';
      au.onblur = function () {
        var an = document.createElement('span');
        an.innerText = au.value;
        au.parentNode.insertBefore(an, e.target.parentNode.children[1]);
        au.parentNode.removeChild(au);
        e.target.parentNode.removeChild(e.target);
      }
    }
    //如果点击其他地方则保持不变
    else {
      e.target = e.target;
    }
  })
})